<template>
  <div style="background-color:#eee;">
    <div style="display:flex;">
      <image-croper type="image"
                    cropper="cropper1"
                    id="id1"
                    @getResult="getResult1"
                    :show="imgUrl1 === ''" />

      <img :src="imgUrl1"
           style="margin:10px;width:50%;border:1px solid #ebebeb;"
           v-if="imgUrl1 !== '' " />
    </div>
    <image-croper type="image"
                  cropper="cropper2"
                  id="id2"
                  @getResult="getResult2"
                  :show="imgUrl2 === ''" />

    <img :src="imgUrl2"
         style="margin:10px;width:50%;border:1px solid #ebebeb;"
         v-if="imgUrl2 !== '' " />
    <div style="padding-top:10px;">
      <van-field placeholder="填写商品名称（必填）" />
    </div>
    <div style="padding-top:10px;">
      <van-field placeholder="填写价格" />
    </div>
    <div style="padding-top:10px;">
      <van-field placeholder="填写介绍详情"
                 type="textarea"
                 style="height:200px;" />
    </div>
    <div style="position:fixed;left:10px;right:10px;bottom:10px;margin-top:10px;">
      <van-button type="warning"
                  size="large"
                  class="button">保存</van-button>
    </div>
    <van-dialog message="商品的名称不能为空">
    </van-dialog>
  </div>
</template>

<script>
import imageCroper from './imageCroper'
export default {
  components: {
    imageCroper
  },
  data: function () {
    return {
      imgUrl1: null,
      imgUrl2: null
    }
  },
  created () {

  },
  methods: {
    getResult1 (value) {
      if (value) {
        this.imgUrl1 = value
      }
      console.log(value)
    },
    getResult2 (value) {
      if (value) {
        this.imgUrl2 = value
      }
      console.log(value)
    }
  }
}
</script>

<style type="text/css" >
.wrap {
  display: block !important;
  width: 100%;
}
.upload {
  display: flex;
}
</style>
